<script lang="ts">
	import './styles.css';
	import {fade, fly} from "svelte/transition";
	import { onMount } from 'svelte';

	let layoutShow = true;
	let layoutShowTwo = false;

	let layoutAppStyle = 'grid-template: "h h h" 50px "l ch ch" 100px "l c c" 1fr "f f f" 30px;';
	const layoutShowFalse = () => {
		layoutShow = false;
		layoutShowTwo = true;
		layoutAppStyle = 'grid-template: "h" 50px "ch" 100px "c" 1fr "f" 30px;';
	}
	const layoutShowTrue = () => {
		layoutShow = true;
		layoutShowTwo = false;
		layoutAppStyle = 'grid-template: "h h h" 50px "l ch ch" 100px "l c c" 1fr "f f f" 30px;';
	}

	let goToTop = false;
	onMount(() => {
		window.addEventListener('scroll', () => {
			if (window.scrollY > 100) {
				goToTop = true;
			} else {
				goToTop = false;
			}
		});
	});

	const onClickGoToTop = () => {
		window.scrollTo({ top: 0, behavior:'smooth' });
	}


</script>
{#if layoutShowTwo}
<div class="layoutShow-Two" transition:fade|fly={{delay: 1}}><button on:click={layoutShowTrue}>》</button></div>
{/if}
<div class="app" style="{layoutAppStyle}">
	<div class="navigation">1</div>
	{#if layoutShow}
	<div class="left-blocking" transition:fade|fly={{delay: 1}}>
		<div class="left-blocking-1">2-1</div>
		<div class="left-blocking-2" on:click={layoutShowFalse}><button class="left-blocking-2-button-style">《</button></div>
	</div>
	{/if}
	<div class="position">
		<div class="position-1">3-1</div>
		<div class="position-2">3-2</div>
	</div>
	<div class="main-body">
		<slot />
	</div>
	<div class="footer">5</div>
</div>
{#if goToTop}
<button id="toTop" title="Go to top" transition:fade|fly={{delay: 1}} on:click={onClickGoToTop}><i class="fa fa-chevron-up"></i></button>
{/if}
<style>
	.app {
		width: 98vw;
		min-width: 480px;
		height: 99vh;
		min-height: 320px;
		margin: 0 auto;
		background-color: #f0f2f5;
	}
	.layoutShow-Two {
		z-index: 9999;
		position: fixed;
		top: 160px;
		left: 5px;
	}
	.app {
		width: 98vw;
		min-width: 480px;
		height: 99vh;
		min-height: 320px;
		margin: 0 auto;
		background-color: #f0f2f5;
		display: grid;
		grid-template: "h h h" 50px "l ch ch" 100px "l c c" 1fr "f f f" 30px;
		gap: 5px;
	}
	.app div {
		border: #ff3e00;
	}
	.navigation {
		grid-area: h;
		background-color: black;
	}
	.left-blocking {
		grid-area: l;
		background-color: #ffffff;
		min-width: 200px;
		display: grid;
		grid-template: "ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll ll lr" 1fr;
	}
	.left-blocking-1 {
		grid-area: ll;

	}
	.left-blocking-2 {
		grid-area: lr;
		text-align: center;
		font-size: 8px;
	}
	.left-blocking-2-button-style {
		height: 100%;
		width: 8px;
		padding-left: 1px;
		padding-right: 10px;
		line-height: 89vh;
	}
	.position {
		grid-area: ch;
		background-color: #ffffff;
	}
	.position-1 {
		margin: 15px 0 15px 20px;
		font-size: 18px;
	}
	.position-2 {
		margin: 15px 0 15px 20px;
		font-size: 28px;
		font-weight: bold;
	}
	.main-body {
		grid-area: c;
	}

	.footer {
		grid-area: f;
		background-color: #ff0032;
	}

	#toTop {
		position: fixed;
		bottom: 40px;
		right: 20px;
		z-index: 99999;
		outline: none;
		background-color: rgb(34, 45, 50);
		color: rgb(238, 238, 238);
		cursor: pointer;
		padding: 10px 15px;
		border-radius: 4px;
		opacity: 0.5;
	}

	@font-face{font-family:'FontAwesome';src:url('$lib/fonts/fontawesome-webfont.eot?v=4.7.0');src:url('$lib/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('$lib/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('$lib/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('$lib/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('$lib/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}
	.fa{display:inline-block;font:normal normal normal 14px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
	#toTop:hover {
		opacity: 1;
	}
	.fa{-webkit-transition:-webkit-transform linear .3s;-moz-transition:-moz-transform linear .3s;-o-transition:-o-transform linear .3s;transition:transform linear .3s}
	.fa-chevron-up:before{content:"\f077"}

</style>
